<template>
    <div class="assess_form pulmonary">
        <div class="form_title">XXXX医疗机构</div>
        <div class="form_name">运动能力评定</div>
        <div class="form_patient_bar">
            <div v-for="(item, index) in patientStruct" :key="index" class="patient_info_item">
                <div class="item_label">{{ item.label }}：</div>
                <div class="item_value">{{ formType == 'template' ? item.label : patientInfo[item.key] }}</div>
            </div>
        </div>
        <div class="form_diagnosis" v-if="formType == 'template'">
            <div class="diagnosis_label">诊断：</div>
            <div class="diagnosis_value">{{ formType == 'template' ? '诊断' : selfFormData.diagnosticInfo }}</div>
        </div>
        <el-form ref="assessForm" :model="selfFormData" :rules="rules">
            <el-form-item prop="grade">
                <table border class="form_table">
                    <colgroup>
                        <col style="width: 80px;">
                        <col style="width: 80px;">
                        <col style="width: 200px;">
                        <col>
                        <col style="width: 50px;" v-if="formType == 'template'">
                        <col style="width: 50px;" v-if="formType == 'template'">
                    </colgroup>
                    <thead>
                        <tr>
                            <th class="text_center">领域</th>
                            <th class="text_center">项目</th>
                            <th class="text_center">评估目的</th>
                            <th class="text_center">评分依据</th>
                            <th class="text_center" v-if="formType == 'template'">分值</th>
                            <th class="text_center" v-if="formType == 'template'">选择</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template v-if="formType == 'template'">
                            <tr v-for="(item, index) in assessFormStruct" :key="index">
                                <td v-if="index == 0" rowspan="3" class="text_center">运动能力</td>
                                <td v-if="index == 0" rowspan="3" class="text_center">面瘫评估</td>
                                <td v-if="index == 0" rowspan="3" class="text_center"></td>
                                <td>{{ item.content }}</td>
                                <td class="text_center">{{ item.score }}</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td colspan="3" class="text_center">本领域合计分值：</td>
                                <td colspan="3" class="text_center"></td>
                            </tr>
                        </template>
                        <template v-else>
                            <tr>
                                <td>运动能力</td>
                                <td>面瘫评估</td>
                                <td>
                                    <el-input v-model="selfFormData.evaluatePurpose" :placeholder="formType == 'edit' ? '请输入评估目的' : ''" :disabled="formType == 'view'" />
                                </td>
                                <td>
                                    <div class="radio_box">
                                        <el-radio-group v-model="selfFormData.facialParalysis" :disabled="formType == 'view'" @change="handleRadioChange">
                                            <el-radio v-for="(item, index) in assessFormStruct" :key="index" :label="item.score">{{ item.content }}</el-radio>
                                        </el-radio-group>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="3" class="text_center">本领域合计分值：</td>
                                <td class="text_center">{{ selfFormData.totalScore }}分</td>
                            </tr>
                        </template>
                        
                    </tbody>
                </table>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
const initDefaultForm = () => {
    return {
        evaluatePurpose: '',
        facialParalysis: undefined,
        totalScore: 0,
    }
}
const assessFormStruct = [
    {
        value: 1,
        content: '急性期',
        score: 1
    },
    {
        value: 2,
        content: '恢复期',
        score: 2
    },
    {
        value: 3,
        content: '后遗症期',
        score: 3
    },
]
export default {
    name: 'Pulmonary',
    props: {
        formType: {
            type: String,
            default: 'template' // 表单类型：template：模板，edit：评估，view：详情
        },
        patientInfo: {
            type: Object,
            default: () => ({}) // 患者信息
        },
        doctorType: {
            type: String,
            default: 'hospital' // 医生类型：hospital：住院医生，outpatient：门诊医生，therapists：治疗师
        },
        assessInfo: {
            type: Object,
            default: () => ({}) // 评定表信息
        }
    },
    data() {
        return {
            assessFormStruct,
            selfFormData: {},
            rules: {
                
            }
        }
    },
    computed: {
        patientStruct() {
            if (this.formType === 'edit' || this.formType === 'view') {
                if (['hospital', 'therapists'].includes(this.doctorType)) {
                    return [{
                        label: '姓名',
                        key: 'patientName'
                    }, {
                        label: '病区',
                        key: 'sickRegion'
                    }, {
                        label: '床号',
                        key: 'bedNum'
                    }, {
                        label: '住院号',
                        key: 'admissionNum'
                    }]
                } else {
                    return [{
                        label: '姓名',
                        key: 'patientName'
                    }, {
                        label: '门诊号',
                        key: 'admissionNum'
                    }]
                }
            } else {
                return [{
                    label: '姓名',
                    key: ''
                }, {
                    label: '门诊号/住院号',
                    key: ''
                }]
            }
        }
    },
    watch: {
        assessInfo: function (val) {
            this.selfFormData = Object.assign(initDefaultForm(), this.assessInfo)
        }
    },
    mounted() {
        this.selfFormData = Object.assign(initDefaultForm(), this.assessInfo);
    },
    methods: {
        getFormData() {
            return new Promise((resolve, reject) => {
                this.$refs.assessForm.validate((valid) => {
                    if (valid) {
                        resolve({
                            ...this.selfFormData
                        })
                    } else {
                        reject('存在未通过表单校验的数据')
                        return false
                    }
                })
            })
        },
        changeToEstimateList(estimateId, submitForm) {
            const keyList = []
            Object.keys(submitForm).forEach(key => {
                if(submitForm[key]){
                keyList.push({
                    key,
                    value: JSON.stringify(submitForm[key])
                })
                }
            })
            return JSON.stringify({
                estimateId,
                keyList
            })
        },
        async saveLocalFormData(source, patientId) {
            let data = await this.getFormData();
            const estimateId = 2
            const submitForm = {
                evaluateSource: source,
                evaluatePurpose: data.evaluatePurpose,
                facialParalysis: data.facialParalysis,
                totalScore: data.totalScore
            }
            localStorage.setItem(`estimate_${source}_${patientId}_${estimateId}`, this.changeToEstimateList(estimateId, submitForm)); 
        },
        handleRadioChange() {
            this.selfFormData.totalScore = this.selfFormData.facialParalysis
        }
    }
}
</script>

<style lang="scss" scoped>
@import url('./style.scss');

.pulmonary {
    .form_diagnosis{
        display: flex;
        margin-bottom: 10px;
    }
    .radio_box {
        ::v-deep .el-radio-group{
            display: flex;
            flex-direction: column;
        }
        ::v-deep .el-radio{
            line-height: 30px;
            margin-right: 0;
        }
        ::v-deep .el-radio__label{
            text-wrap: wrap;
        }
    }

    .check_icon {
        font-size: 24px;
        vertical-align: middle;
    }
}
</style>
